<template>
  <div class="cell-item van-hairline--bottom flex flex-center">
    <div class="cell-left">
      <span class="require" v-if="isRequire">*</span>
      {{ label }}
    </div>
    <div class="cell-right flex flex1 tar">
      <div class="flex1 ellipsis">
        <slot name="right" />
      </div>
      <span class="iconfont iconjinru dept-icon" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    isRequire: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    return {
      ...props
    };
  }
};
</script>

<style lang="scss" scoped>
.cell-item {
  padding: 32px 30px 32px 54px;
  background: #fff;
  font-size: 32px;
  font-weight: 500;
  color: #373d52;

  .cell-left {
    position: relative;
  }
  .require {
    color: red;
    position: absolute;
    left: -20px;
  }

  .cell-icon {
    font-size: 26px;
    font-weight: bold;
    color: #a2a6b8;
  }

  .cell-right {
    justify-content: end;
    color: #a2a6b8;
    min-width: 0;
    padding-left: 20px;
  }
}
</style>